<template>
  <div class="">
    <!-- 补充的 侧边导航 简单版的不用v-model的封装 以及用vant的侧边导航实现 -->
    <h1>分类</h1>
    <my-input v-model="keyword" @keydown.enter="search"></my-input>

    <!-- <div style="display: flex">
      <my-nav :list="navList.data" @changeNav="changeNav" />

      <van-grid :column-num="3" style="flex: 1">
        <van-grid-item
          v-for="item in result"
          :key="item.id"
          :icon="item.icon"
          :text="item.name"
          @click="$router.push('/my')"
        />
      </van-grid>
    </div> -->

    <div style="display: flex">
      <van-sidebar style="width: 20%" v-model="active">
        <van-sidebar-item
          v-for="item in navList.data"
          :key="item.id"
          :title="item.name"
          @click="changeNav(item.id)"
        />
      </van-sidebar>
      <van-grid :column-num="3" style="flex: 1">
        <van-grid-item
          v-for="item in result"
          :key="item.id"
          :icon="item.icon"
          :text="item.name"
          @click="$router.push('/my')"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, watch } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import myInput from "../components/myInput.vue";
import myNav from "../components/myNav.vue";
import navList from "../../public/cate.json";
//引入json

import { getcateList } from "../utils/yx";
//获取所有的数据

export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      keyword: "",
      //搜索关键字
      select: 0,
      //侧边导航v-model的值
      result: [],
      //筛选出来的数据
      list: [],
      //所有的数据
      active: 0,
    });
    const search = () => {
      console.log("会车搜索");
      data.result = data.list.filter((item) => {
        return item.name.includes(data.keyword);
      });
      //对搜索关键字进行搜索
    };
    //搜索事件
    getcateList().then((res) => {
      console.log(res);
      data.list = res.data;
      data.result = res.data;
    });
    //获取所有的数据 给list和result都是这个数据

    const changeNav = (id) => {
      if (id == 0) {
        data.result = data.list;
        return false;
      }
      data.result = data.list.filter((item) => {
        return item.pid == id;
      });
    };
    //在子组件点击li的时候 调用父组件的事件 进行筛选 并且把 子组件的当前点击的id传来（子传父）进行筛选

    return { ...toRefs(data), search, navList, changeNav };
  },
  components: {
    myInput,
    myNav,
  },
};
</script>

<style lang="scss"></style>
